<template>
    <el-icon class="icon-box-wrapper" :color="color">
        <component v-if="isElIcon" :is="iconName"></component>
        <SvgIcon v-else :name="svgName"></SvgIcon>
    </el-icon>
</template>

<script setup lang="ts">
import { IconNameType } from '@/types/type'
import SvgIcon from '~virtual/svg-component'
import { type SvgName } from '~virtual/svg-component'
interface Props {
    name: IconNameType
    color?: string
}
const props = defineProps<Props>()

const svgName = ref<SvgName>()
const iconName = ref<string>()
const isElIcon = ref<boolean>(true)

watch(props, () => {
    getName()
})

onBeforeMount(() => {
    getName()
})
const getName = () => {
    // 将name转成string
    const name = props.name as string
    // 如果name存在就按照 '-' 分割成数组
    const icons = name ? name.split('-') : ''
    // 获取前缀
    const prefix = icons.length >= 2 ? icons[0] : ''
    switch (prefix) {
        case 'icon':
            isElIcon.value = false
            svgName.value = props.name as SvgName
            break
        case 'el':
            isElIcon.value = true
            iconName.value = icons[1]
            break
        default:
            break
    }
}
</script>

<style lang="scss" scoped>
.icon-box-wrapper {
    font-size: 20px;
}
</style>
